import React from 'react';
import PropTypes from 'prop-types';
import { List, InputItem, Picker, TextareaItem } from 'antd-mobile';

const seasons = [
  {
    label: '机械学院',
    value: '机械学院',
  },
  {
    label: '电气学院',
    value: '电气学院',
  },
  {
    label: '农工学院',
    value: '农工学院',
  },
  {
    label: '计算机学院',
    value: '计算机学院',
  },
];

const JoinForm = props => {
  const { getFieldDecorator } = props.form;

  return (
    <List renderHeader={() => '基本信息'} className="pre-fields-form">
      {getFieldDecorator('sdut_id', {
        rules: [
          { required: true, message: '学号不能为空' },
          { len: 11, message: '输入的学号不合法' },
        ],
      })(
        <InputItem placeholder="请输入学号" clear>
          <div>学号*</div>
        </InputItem>,
      )}
      {getFieldDecorator('sdut_name', {
        rules: [{ required: true, message: '姓名不能为空' }],
      })(
        <InputItem placeholder="请输入姓名" clear>
          <div>姓名*</div>
        </InputItem>,
      )}
      {getFieldDecorator('college', {
        setFieldsValue: props.inputFields.fields.college,
        rules: [{ required: true, message: '学院不能为空' }],
      })(
        <Picker
          data={seasons}
          extra="请选择学院"
          cols={1}
          onChange={val => props.handleChange('college', val)}
        >
          <List.Item arrow="horizontal">学院*</List.Item>
        </Picker>,
      )}
      {getFieldDecorator('class_name', {
        rules: [{ required: true, message: '班级不能为空' }],
      })(
        <InputItem placeholder="请输入班级" clear>
          <div>班级*</div>
        </InputItem>,
      )}
      {getFieldDecorator('phone', {
        rules: [
          { required: true, message: '联系方式不能为空' },
          { len: 11, message: '输入的联系方式不合法' },
        ],
      })(
        <InputItem placeholder="请输入联系方式" clear>
          <div>联系方式*</div>
        </InputItem>,
      )}
      {getFieldDecorator('qq', {
        // rules: [{ required: true, message: '参观时间段不能为空' }],
      })(
        <InputItem placeholder="请输入QQ" clear>
          <div>QQ</div>
        </InputItem>,
      )}
      {getFieldDecorator('wanted', {
        setFieldsValue: props.inputFields.fields.wanted,
        rules: [{ required: true, message: '志愿部门不能为空' }],
      })(
        <Picker
          data={seasons}
          extra="选择志愿部门"
          cols={1}
          onChange={val => props.handleChange('wanted', val)}
        >
          <List.Item arrow="horizontal">志愿部门*</List.Item>
        </Picker>,
      )}
      {getFieldDecorator('introduce', {
        rules: [{ required: true, message: '自我介绍不能为空' }],
      })(
        <TextareaItem
          title="自我介绍*"
          autoHeight
          // rows={2}
          placeholder="展示自我风采"
        />,
      )}
    </List>
  );
};

JoinForm.propTypes = {
  fieldList: PropTypes.array,
  fieldAnswers: PropTypes.object,
  handleChange: PropTypes.func.isRequired,
};

export default JoinForm;
